<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>进度条</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<style type="text/css">
			body{
				margin: 10px 0;
			}
		</style>
		<div class="container">
			<div class="progress">
				<div class="progress-bar " role="progressbar" aria-valuenow="50"  aria-valuemin="0" aria-valuemax="100" style="width: 50%">
					<span class="sr-only">60%</span>
				</div>
			</div>
			
			
			<div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="600" style="width: 60%">
					60%
				</div>
			</div>
			
			
			<!--几种样式-->
			<div class="progress">
				<div class="progress-bar progress-bar-danger" role="progressbar" style="width: 40%;">
					40%
				</div>
			</div><div class="progress">
				<div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%;">
					40%
				</div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 40%;">
					40%
				</div>
			</div>
			
			<!--斑马线+动画-->
			<div class="progress ">								<!--斑马线-->  		<!--动画-->
				<div class="progress-bar  progress-bar-warning  progress-bar-striped active" role="progressbar" style="width: 80%;">
					80%
				</div>
			</div>
			
			<!--堆叠-->
			<div class="progress">
				<div class="progress-bar" style="width: 30%;">
					30%
				</div>
				
				<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 25%;">
					25%
				</div>
			</div>
		</div>
	</body>
</html>
